ผลลัพธ์ WebXR Hit Test: การประมวลผลผลลัพธ์ Ray Casting เพื่อประสบการณ์ที่สมจริง

WebXR Device API เปิดโอกาสอันน่าตื่นเต้นสำหรับการสร้างสรรค์ประสบการณ์ความเป็นจริงเสริม (AR) และความเป็นจริงเสมือน (VR) ที่สมจริงได้โดยตรงภายในเบราว์เซอร์ หนึ่งในแง่มุมพื้นฐานของการสร้างแอปพลิเคชัน WebXR แบบอินเทอร์แอคทีฟคือการทำความเข้าใจและใช้ประโยชน์จาก ผลลัพธ์การทดสอบการชน (hit test results) อย่างมีประสิทธิภาพ บล็อกโพสต์นี้จะให้คำแนะนำที่ครอบคลุมเกี่ยวกับการประมวลผลผลลัพธ์การทดสอบการชนที่ได้มาจากการยิงรังสี (ray casting) ซึ่งจะช่วยให้คุณสามารถสร้างปฏิสัมพันธ์กับผู้ใช้ที่ใช้งานง่ายและน่าดึงดูดใจภายในฉาก WebXR ของคุณได้

Ray Casting คืออะไร และเหตุใดจึงมีความสำคัญใน WebXR?

Ray casting คือเทคนิคที่ใช้ในการพิจารณาว่ารังสีที่ปล่อยออกมาจากจุดและทิศทางที่กำหนดนั้นตัดกับวัตถุในฉาก 3 มิติหรือไม่ ใน WebXR โดยทั่วไปแล้ว ray casting จะใช้เพื่อจำลองการจ้องมองของผู้ใช้หรือวิถีของวัตถุเสมือน เมื่อรังสีตัดกับพื้นผิวในโลกแห่งความเป็นจริง (ใน AR) หรือวัตถุเสมือน (ใน VR) ผลลัพธ์การทดสอบการชน (hit test result) จะถูกสร้างขึ้น

ผลลัพธ์การทดสอบการชนมีความสำคัญอย่างยิ่งด้วยเหตุผลหลายประการ:

• การวางวัตถุเสมือน: ใน AR การทดสอบการชนช่วยให้คุณสามารถวางวัตถุเสมือนบนพื้นผิวในโลกแห่งความเป็นจริงได้อย่างแม่นยำ เช่น โต๊ะ พื้น หรือผนัง
• ปฏิสัมพันธ์ของผู้ใช้: ด้วยการติดตามว่าผู้ใช้กำลังมองหรือชี้ไปที่ใด การทดสอบการชนช่วยให้เกิดปฏิสัมพันธ์กับวัตถุเสมือนได้ เช่น การเลือก การจัดการ หรือการเปิดใช้งานวัตถุเหล่านั้น
• การนำทาง: ในสภาพแวดล้อม VR การทดสอบการชนสามารถใช้เพื่อนำทางในระบบ เช่น การอนุญาตให้ผู้ใช้เทเลพอร์ตหรือเคลื่อนที่ไปรอบ ๆ ฉากโดยการชี้ไปยังตำแหน่งที่ต้องการ
• การตรวจจับการชน: การทดสอบการชนสามารถใช้สำหรับการตรวจจับการชนขั้นพื้นฐาน เพื่อพิจารณาว่าเมื่อใดที่วัตถุเสมือนชนกับวัตถุอื่นหรือโลกแห่งความเป็นจริง

การทำความเข้าใจ WebXR Hit Test API

WebXR Hit Test API มีเครื่องมือที่จำเป็นสำหรับการทำการยิงรังสีและรับผลลัพธ์การทดสอบการชน นี่คือรายละเอียดของแนวคิดและฟังก์ชันหลัก:

XRRay

XRRay หมายถึงรังสีในพื้นที่ 3 มิติ ซึ่งกำหนดโดยจุดกำเนิดและเวกเตอร์ทิศทาง คุณสามารถสร้าง XRRay โดยใช้เมธอด XRFrame.getPose() ซึ่งจะคืนค่าท่าทางของแหล่งอินพุตที่ถูกติดตาม (เช่น ศีรษะของผู้ใช้ คอนโทรลเลอร์มือ) จากท่าทางนั้น คุณสามารถหาจุดกำเนิดและทิศทางของรังสีได้

XRHitTestSource

XRHitTestSource หมายถึงแหล่งที่มาของผลลัพธ์การทดสอบการชน คุณสร้างแหล่งที่มาของการทดสอบการชนโดยใช้เมธอด XRSession.requestHitTestSource() หรือ XRSession.requestHitTestSourceForTransientInput() เมธอดแรกโดยทั่วไปจะใช้สำหรับการทดสอบการชนอย่างต่อเนื่องโดยอิงจากแหล่งที่มาถาวร เช่น ตำแหน่งศีรษะของผู้ใช้ ในขณะที่เมธอดที่สองมีไว้สำหรับเหตุการณ์อินพุตชั่วคราว เช่น การกดปุ่มหรือท่าทาง

XRHitTestResult

XRHitTestResult หมายถึงจุดตัดหนึ่งจุดระหว่างรังสีกับพื้นผิว ประกอบด้วยข้อมูลเกี่ยวกับการตัดกัน เช่น ระยะห่างจากจุดกำเนิดของรังสีไปยังจุดที่ชน และท่าทางของจุดที่ชนในพื้นที่อ้างอิงของฉาก

XRHitTestResult.getPose()

เมธอดนี้จะคืนค่า XRPose ของจุดที่ชน ท่าทางประกอบด้วยตำแหน่งและการวางแนวของจุดที่ชน ซึ่งสามารถใช้เพื่อวางวัตถุเสมือนหรือทำการแปลงค่าอื่น ๆ ได้

การประมวลผลผลลัพธ์การทดสอบการชน: คำแนะนำทีละขั้นตอน

เรามาดูขั้นตอนการรับและประมวลผลผลลัพธ์การทดสอบการชนในแอปพลิเคชัน WebXR กัน ตัวอย่างนี้จะสมมติว่าคุณกำลังใช้ไลบรารีการเรนเดอร์เช่น three.js หรือ Babylon.js

1. การขอแหล่งที่มาของการทดสอบการชน

ขั้นแรก คุณต้องขอแหล่งที่มาของการทดสอบการชนจาก XRSession โดยทั่วไปจะทำหลังจากที่เซสชันได้เริ่มต้นขึ้นแล้ว คุณจะต้องระบุระบบพิกัดที่คุณต้องการให้ผลลัพธ์การทดสอบการชนถูกส่งคืนมา ตัวอย่างเช่น:

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Or xrSession.local
    });
  } catch (error) {
    console.error("Failed to create hit test source: ", error);
  }
}

// Call this function after the XR session has started
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

คำอธิบาย:

• xrSession.requestHitTestSource(): ฟังก์ชันนี้จะขอแหล่งที่มาของการทดสอบการชนจากเซสชัน XR
• { space: xrSession.viewerSpace }: ส่วนนี้จะระบุระบบพิกัดที่ผลลัพธ์การทดสอบการชนจะถูกส่งคืน viewerSpace จะอ้างอิงตามตำแหน่งของผู้ดู ในขณะที่ local จะอ้างอิงตามจุดกำเนิดของ XR นอกจากนี้คุณยังสามารถใช้ localFloor สำหรับการติดตามที่สัมพันธ์กับพื้นได้
• การจัดการข้อผิดพลาด: บล็อก try...catch ช่วยให้แน่ใจว่าข้อผิดพลาดระหว่างการสร้างแหล่งที่มาของการทดสอบการชนจะถูกดักจับและบันทึกไว้

2. การทำการทดสอบการชนในลูปแอนิเมชัน

ภายในลูปแอนิเมชันของคุณ (ฟังก์ชันที่เรนเดอร์แต่ละเฟรม) คุณจะต้องทำการทดสอบการชนโดยใช้เมธอด XRFrame.getHitTestResults() เมธอดนี้จะคืนค่าอาร์เรย์ของอ็อบเจกต์ XRHitTestResult ซึ่งแสดงถึงการตัดกันทั้งหมดที่พบในฉาก

            function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrSession.referenceSpace);

  if (pose) {
    if (xrHitTestSource) {
      const hitTestResults = frame.getHitTestResults(xrHitTestSource);

      if (hitTestResults.length > 0) {
        processHitTestResults(hitTestResults);
      }
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

คำอธิบาย:

• frame.getViewerPose(xrSession.referenceSpace): รับค่าท่าทางของผู้ดู (ชุดหูฟัง) ซึ่งจำเป็นต่อการทราบว่าผู้ดูอยู่ที่ไหนและกำลังมองไปที่ใด
• frame.getHitTestResults(xrHitTestSource): ทำการทดสอบการชนโดยใช้แหล่งที่มาของการทดสอบการชนที่สร้างไว้ก่อนหน้านี้
• hitTestResults.length > 0: ตรวจสอบว่าพบการตัดกันใด ๆ หรือไม่

3. การประมวลผลผลลัพธ์การทดสอบการชน

ฟังก์ชัน processHitTestResults() คือที่ที่คุณจะจัดการกับผลลัพธ์ของการทดสอบการชน โดยทั่วไปจะเกี่ยวข้องกับการอัปเดตตำแหน่งและการวางแนวของวัตถุเสมือนตามท่าทางของจุดที่ชน

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Get the first hit result
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Update the position and orientation of a virtual object
    virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);

    // Show visual feedback (e.g., a circle) at the hit point
    hitMarker.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    hitMarker.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    hitMarker.visible = true;
  } else {
    hitMarker.visible = false;
  }
}

            

              
                Copy
              
            
          

คำอธิบาย:

• hitTestResults[0]: ดึงผลลัพธ์การทดสอบการชนอันแรก หากมีการตัดกันหลายจุดที่เป็นไปได้ คุณอาจต้องวนซ้ำทั้งอาร์เรย์และเลือกผลลัพธ์ที่เหมาะสมที่สุดตามตรรกะของแอปพลิเคชันของคุณ
• hit.getPose(xrSession.referenceSpace): รับค่าท่าทางของจุดที่ชนในพื้นที่อ้างอิงที่ระบุ
• virtualObject.position.set(...) และ virtualObject.quaternion.set(...): อัปเดตตำแหน่งและการหมุน (quaternion) ของวัตถุเสมือน (เช่น Mesh ของ three.js) เพื่อให้ตรงกับท่าทางของจุดที่ชน
• การตอบสนองทางภาพ: ตัวอย่างนี้ยังรวมโค้ดเพื่อแสดงการตอบสนองทางภาพ ณ จุดที่ชน เช่น วงกลมหรือเครื่องหมายง่ายๆ เพื่อช่วยให้ผู้ใช้เข้าใจว่าพวกเขากำลังโต้ตอบกับฉากที่ใด

เทคนิคการทดสอบการชนขั้นสูง

นอกเหนือจากตัวอย่างพื้นฐานข้างต้นแล้ว ยังมีเทคนิคขั้นสูงอีกหลายอย่างที่คุณสามารถใช้เพื่อปรับปรุงการใช้งานการทดสอบการชนของคุณ:

การทดสอบการชนด้วยอินพุตชั่วคราว

สำหรับการโต้ตอบที่เกิดจากอินพุตชั่วคราว เช่น การกดปุ่มหรือท่าทางของมือ คุณสามารถใช้เมธอด XRSession.requestHitTestSourceForTransientInput() ได้ เมธอดนี้จะสร้างแหล่งที่มาของการทดสอบการชนที่เฉพาะเจาะจงสำหรับเหตุการณ์อินพุตเดียว ซึ่งมีประโยชน์ในการหลีกเลี่ยงการโต้ตอบที่ไม่ได้ตั้งใจซึ่งมาจากการทดสอบการชนอย่างต่อเนื่อง

            async function handleSelect(event) {
  try {
    const frame = event.frame;
    const inputSource = event.inputSource;

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Or the appropriate input profile
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Error during transient hit test: ", error);
  }
}

// Attach this function to your input select event listener
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

การกรองผลลัพธ์การทดสอบการชน

ในบางกรณี คุณอาจต้องการกรองผลลัพธ์การทดสอบการชนตามเกณฑ์เฉพาะ เช่น ระยะห่างจากจุดกำเนิดของรังสีหรือประเภทของพื้นผิวที่ถูกตัดกัน คุณสามารถทำได้โดยการกรองอาร์เรย์ XRHitTestResult ด้วยตนเองหลังจากได้รับมา

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Skip if no pose

    const distance = Math.sqrt(
      Math.pow(hitPose.transform.position.x - camera.position.x, 2) +
      Math.pow(hitPose.transform.position.y - camera.position.y, 2) +
      Math.pow(hitPose.transform.position.z - camera.position.z, 2)
    );

    return distance < 2; // Only consider hits within 2 meters
  });

  if (filteredResults.length > 0) {
    const hit = filteredResults[0];
    const hitPose = hit.getPose(xrSession.referenceSpace);

    if (hitPose) {
      // Update object position based on the filtered result
      virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    }
  }
}

            

              
                Copy
              
            
          

การใช้พื้นที่อ้างอิงที่แตกต่างกัน

การเลือกพื้นที่อ้างอิง (viewerSpace, local, localFloor หรือพื้นที่กำหนดเองอื่น ๆ) มีผลอย่างมากต่อการตีความผลลัพธ์การทดสอบการชน โปรดพิจารณาสิ่งต่อไปนี้:

• viewerSpace: ให้ผลลัพธ์ที่สัมพันธ์กับตำแหน่งของผู้ดู ซึ่งมีประโยชน์สำหรับการสร้างการโต้ตอบที่ผูกโดยตรงกับการจ้องมองของผู้ใช้
• local: ให้ผลลัพธ์ที่สัมพันธ์กับจุดกำเนิดของ XR (จุดเริ่มต้นของเซสชัน XR) เหมาะสำหรับการสร้างประสบการณ์ที่วัตถุยังคงอยู่กับที่ในสภาพแวดล้อมทางกายภาพ
• localFloor: คล้ายกับ local แต่แกน Y จะถูกจัดให้อยู่ในแนวเดียวกับพื้น ซึ่งช่วยให้กระบวนการวางวัตถุบนพื้นง่ายขึ้น

เลือกพื้นที่อ้างอิงที่สอดคล้องกับความต้องการของแอปพลิเคชันของคุณมากที่สุด ทดลองใช้พื้นที่อ้างอิงต่าง ๆ เพื่อทำความเข้าใจพฤติกรรมและข้อจำกัดของพวกมัน

กลยุทธ์การเพิ่มประสิทธิภาพสำหรับการทดสอบการชน

การทดสอบการชนอาจเป็นกระบวนการที่ใช้การคำนวณสูง โดยเฉพาะในฉากที่ซับซ้อน นี่คือกลยุทธ์การเพิ่มประสิทธิภาพที่ควรพิจารณา:

• จำกัดความถี่ของการทดสอบการชน: ทำการทดสอบการชนเฉพาะเมื่อจำเป็นเท่านั้น แทนที่จะทำทุกเฟรม ตัวอย่างเช่น คุณสามารถทำการทดสอบการชนเฉพาะเมื่อผู้ใช้กำลังโต้ตอบกับฉากอย่างแข็งขัน
• ใช้ Bounding Volume Hierarchy (BVH): หากคุณกำลังทำการทดสอบการชนกับวัตถุจำนวนมาก ให้พิจารณาใช้ BVH เพื่อเร่งการคำนวณการตัดกัน ไลบรารีเช่น three.js และ Babylon.js มีการใช้งาน BVH ในตัว
• การแบ่งพาร์ติชันเชิงพื้นที่ (Spatial Partitioning): แบ่งฉากออกเป็นพื้นที่ย่อย ๆ และทำการทดสอบการชนเฉพาะกับพื้นที่ที่มีแนวโน้มว่าจะมีการตัดกัน ซึ่งสามารถลดจำนวนวัตถุที่ต้องตรวจสอบได้อย่างมาก
• ลดจำนวนโพลีกอน: ทำให้รูปทรงเรขาคณิตของโมเดลของคุณง่ายขึ้นเพื่อลดจำนวนโพลีกอนที่ต้องทดสอบ ซึ่งสามารถปรับปรุงประสิทธิภาพได้ โดยเฉพาะบนอุปกรณ์มือถือ
• WebWorker: ย้ายการคำนวณไปยัง Web Worker เพื่อให้แน่ใจว่ากระบวนการทดสอบการชนจะไม่บล็อกเธรดหลัก

ข้อควรพิจารณาข้ามแพลตฟอร์ม

WebXR มุ่งหวังที่จะเป็นแบบข้ามแพลตฟอร์ม แต่อาจมีความแตกต่างเล็กน้อยในพฤติกรรมระหว่างอุปกรณ์และเบราว์เซอร์ต่าง ๆ โปรดคำนึงถึงสิ่งต่อไปนี้:

• ความสามารถของอุปกรณ์: ไม่ใช่ทุกอุปกรณ์ที่รองรับฟีเจอร์ WebXR ทั้งหมด ใช้การตรวจจับฟีเจอร์เพื่อพิจารณาว่ามีฟีเจอร์ใดบ้างและปรับแอปพลิเคชันของคุณให้เหมาะสม
• โปรไฟล์อินพุต: อุปกรณ์ต่าง ๆ อาจใช้โปรไฟล์อินพุตที่แตกต่างกัน (เช่น generic-touchscreen, hand-tracking, gamepad) ตรวจสอบให้แน่ใจว่าแอปพลิเคชันของคุณรองรับโปรไฟล์อินพุตหลายรูปแบบและมีกลไกสำรองที่เหมาะสม
• ประสิทธิภาพ: ประสิทธิภาพอาจแตกต่างกันอย่างมากในอุปกรณ์ต่าง ๆ เพิ่มประสิทธิภาพแอปพลิเคชันของคุณสำหรับอุปกรณ์ระดับต่ำสุดที่คุณวางแผนจะรองรับ
• ความเข้ากันได้ของเบราว์เซอร์: ตรวจสอบให้แน่ใจว่าแอปของคุณได้รับการทดสอบและทำงานได้บนเบราว์เซอร์หลัก ๆ เช่น Chrome, Firefox และ Edge

ตัวอย่างแอปพลิเคชัน WebXR ทั่วโลกที่ใช้การทดสอบการชน

นี่คือตัวอย่างบางส่วนของแอปพลิเคชัน WebXR ที่ใช้การทดสอบการชนอย่างมีประสิทธิภาพเพื่อสร้างประสบการณ์ผู้ใช้ที่น่าสนใจและใช้งานง่าย:

• IKEA Place (สวีเดน): ช่วยให้ผู้ใช้สามารถวางเฟอร์นิเจอร์ของ IKEA ในบ้านของตนเองได้แบบเสมือนจริงโดยใช้ AR การทดสอบการชนใช้เพื่อวางตำแหน่งเฟอร์นิเจอร์บนพื้นและพื้นผิวอื่น ๆ อย่างแม่นยำ
• Sketchfab AR (ฝรั่งเศส): ช่วยให้ผู้ใช้สามารถดูโมเดล 3 มิติจาก Sketchfab ในรูปแบบ AR ได้ การทดสอบการชนใช้เพื่อวางโมเดลในโลกแห่งความเป็นจริง
• Augmented Images (หลากหลาย): แอปพลิเคชัน AR จำนวนมากใช้การติดตามภาพร่วมกับการทดสอบการชนเพื่อยึดเนื้อหาเสมือนกับภาพหรือเครื่องหมายเฉพาะในโลกแห่งความเป็นจริง
• WebXR Games (ทั่วโลก): เกมจำนวนมากกำลังถูกพัฒนาโดยใช้ WebXR ซึ่งหลายเกมต้องอาศัยการทดสอบการชนสำหรับการวางวัตถุ การโต้ตอบ และการนำทาง
• Virtual Tours (ทั่วโลก): ทัวร์เสมือนจริงของสถานที่ พิพิธภัณฑ์ หรืออสังหาริมทรัพย์มักใช้การทดสอบการชนสำหรับการนำทางของผู้ใช้และองค์ประกอบแบบอินเทอร์แอคทีฟภายในสภาพแวดล้อมเสมือน

สรุป

การเชี่ยวชาญในผลลัพธ์การทดสอบการชนของ WebXR และการประมวลผล ray casting เป็นสิ่งจำเป็นสำหรับการสร้างประสบการณ์ AR และ VR ที่น่าสนใจและใช้งานง่ายบนเว็บ ด้วยการทำความเข้าใจแนวคิดพื้นฐานและใช้เทคนิคที่อธิบายไว้ในบล็อกโพสต์นี้ คุณสามารถสร้างแอปพลิเคชันที่สมจริงซึ่งผสมผสานโลกเสมือนและโลกแห่งความเป็นจริงได้อย่างลงตัว หรือสร้างสภาพแวดล้อมเสมือนที่น่าดึงดูดด้วยการโต้ตอบของผู้ใช้ที่เป็นธรรมชาติและใช้งานง่าย อย่าลืมเพิ่มประสิทธิภาพการใช้งานการทดสอบการชนของคุณและพิจารณาความเข้ากันได้ข้ามแพลตฟอร์มเพื่อให้แน่ใจว่าผู้ใช้ทุกคนจะได้รับประสบการณ์ที่ราบรื่น ในขณะที่ระบบนิเวศของ WebXR ยังคงพัฒนาอย่างต่อเนื่อง คาดว่าจะมีความก้าวหน้าและการปรับปรุงเพิ่มเติมใน API การทดสอบการชน ซึ่งจะเปิดโอกาสสร้างสรรค์มากยิ่งขึ้นสำหรับการพัฒนาเว็บที่สมจริง โปรดศึกษาข้อมูลจำเพาะล่าสุดของ WebXR และเอกสารของเบราว์เซอร์อยู่เสมอเพื่อรับข้อมูลที่ทันสมัยที่สุด